<template>
  <div v-if="loginUser.aid == 1" style="font-size: 25px">
    <Plus style="width: 1em; height: 1em; margin-right: 8px; color: red" @click="addhandler" />
    <!-- Since svg icons do not carry any attributes by default -->
    <!-- You need to provide attributes directly -->
    <Edit style="width: 1em; height: 1em; margin-right: 8px; color: red" @click="Edithandler" />

  </div>

  <el-table :data="authorityList" @selection-change="handleSelectionChange" border style="width: 100%">
    <el-table-column type="selection" width="55" />
    <el-table-column label="ID" prop="aid" align="center" />
    <el-table-column label="权限名称" prop="authority" align="center" />
    <el-table-column label="操作" align="center">
      <!-- 使用template中的作用域插槽，
      它的作用是在外部获取组件内的数据 ,
      这里是为了获取这一行的数据，
      我们让slot-scope值为scope，那么由scope.row就可以得到数据了 -->
      <template #default="scope">
        <el-button type="primary" :disabled="loginUser.aid == 2" icon="Edit" @click="handleEdit(scope.row.id)" circle
          color:red />
        <el-button type="danger" icon="Delete" :disabled="loginUser.aid == 2" circle
          @click="handleDelete(scope.row.id)" />
      </template>
    </el-table-column>
  </el-table>
  <div> 
    <mypage :total="total" ref="page"></mypage>
  </div>
</template>

<script setup>
import mypage from "../components/page.vue";
import axios from "axios";

import { Edit, Plus } from "@element-plus/icons-vue";
import { ref, onMounted, onBeforeMount } from "vue"; //按需导入
const authorityList = ref([{}]); //定义复杂数据类型
const total = ref(0);
const loginUser = ref({});
const handleEdit = (id) => {
  console.log(id);
}; //自定义方法

const handleDelete = (id) => {
  console.log(id);
};
onBeforeMount(() => {
  loginUser.value = JSON.parse(sessionStorage.getItem("user"));
});
onMounted(() => {
  getAuthorities();
});

const getAuthorities = () => {
  axios.get("/authority/getAuthorities").then((res) => {
    authorityList.value = res.data.result;
    console.log("authorityList.value");
    total.value = res.data.result.length;
  });
};
</script>
